import './GongJu.css'
import gj from '../zustand/gongJuStatus.js'
import React, {useState} from 'react';

function GongJu(props) {
    const [input_val, set_input_val] = useState('1')
    const num = gj((state) => state.num) //获取数据
    const jia = gj((state) => state.jia) //获取函数
    const jian = gj((state) => state.jian) //获取函数

    function selectChange(e) {
        set_input_val(e.target.value)
    }

    function add() {
        jia(input_val)
    }

    function subtract() {
        jian(input_val)
    }

    function oddAdd() {
        if (num % 2 !== 0) {
            jia(input_val)
        }
    }

    function asyncAdd() {
        setTimeout(() => {
            jia(input_val)
        }, 500)
    }


    return (
        <div>
            <h3>获取store的数据：{num}</h3>
            <div>
                <select className={"input"} value={input_val} onChange={selectChange}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={add}>加</button>
                &nbsp;
                <button onClick={subtract}>减</button>
                &nbsp;
                <button onClick={oddAdd}>当前求和为奇数再加</button>
                &nbsp;
                <button onClick={asyncAdd}>异步加</button>
            </div>
        </div>
    );
}


export default GongJu;